<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://example.com/page/4/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 5.4.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-Git常用命令" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2021/07/18/Git%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" class="article-date">
  <time datetime="2021-07-18T02:48:04.211Z" itemprop="datePublished">2021-07-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><img src="C:\Users\MyPC\AppData\Roaming\Typora\typora-user-images\image-20210512220827365.png" alt="image-20210512220827365"></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2021/07/18/Git%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" data-id="ckr8lt4rq000220qw40yw5096" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-get&amp;post传参方式" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2021/07/18/get&post%E4%BC%A0%E5%8F%82%E6%96%B9%E5%BC%8F/" class="article-date">
  <time datetime="2021-07-18T02:48:04.208Z" itemprop="datePublished">2021-07-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="GET-和-POST-传参"><a href="#GET-和-POST-传参" class="headerlink" title="GET 和 POST 传参"></a>GET 和 POST 传参</h1><h2 id="一、GET-和-POST-传参方式的优缺点"><a href="#一、GET-和-POST-传参方式的优缺点" class="headerlink" title="一、GET 和 POST 传参方式的优缺点"></a>一、GET 和 POST 传参方式的优缺点</h2><p>1.post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）<br>2.post发送的数据量更大（get有url长度限制）<br>3.post能发送更多的数据类型（get只能发送ASCII字符）<br>4.post比get慢<br>5.Post是向服务器提交数据的一种请求，get是向服务器发索取数据的一种请求。<br>6.get会将数据缓存起来，而post不会<br>7.post请求包含更多的请求头<br>8.post在真正接受数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据</p>
<h2 id="二、GET-和-POST-传参方式的请求过程"><a href="#二、GET-和-POST-传参方式的请求过程" class="headerlink" title="二、GET 和 POST 传参方式的请求过程"></a>二、GET 和 POST 传参方式的请求过程</h2><p>post请求的过程：<br>1.浏览器请求tcp连接（第一次握手）<br>2.服务器答应进行tcp连接（第二次握手）<br>3.浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）<br>4.服务器返回100 continue响应<br>5.浏览器开始发送数据<br>6.服务器返回200 ok响应<br>get请求的过程<br>1.浏览器请求tcp连接（第一次握手）<br>2.服务器答应进行tcp连接（第二次握手）<br>3.浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）<br>4.服务器返回200 ok响应。</p>
<h2 id="三、相对来说-GET-对比-POST-的优势是什么？"><a href="#三、相对来说-GET-对比-POST-的优势是什么？" class="headerlink" title="三、相对来说 GET 对比 POST 的优势是什么？"></a>三、相对来说 GET 对比 POST 的优势是什么？</h2><p>GET 的URL可以手动输入啊，你在地址栏打个POST看看。本质上面， GET 的所有信息都在URL， 所以很方便的记录下来重复使用。如果你期望你复制的url资源可以更好的分享给别人看，那就用GET方法吧～POST方法做不到哦～<br>然而从深层次上分析：虽然这两者都是明文传送。但它们表达的语义不一样，这决定了主干网络可以对其做不同的处理。<br>get表达的是一种幂等的，只读的，纯粹的操作，即它除了返回结果不应该会产生其它副作用（如写数据库），因此绝大部分get请求（通常超过90%）都直接被CDN缓存了，这能大大减少web服务器的负担。<br>而post所表达的语义是非幂等的，有副作用的操作，所以必须交由web服务器处理。<br>因此若是把所有get请求换成post，意味着主干网络上的所有CDN都废掉了，web服务器要处理的请求数量将成百上千倍地增加，显然这不是一个聪明的做法！</p>
<h2 id="四、VUE之使用-AXIOS-进行GET-和-POST-进行传参"><a href="#四、VUE之使用-AXIOS-进行GET-和-POST-进行传参" class="headerlink" title="四、VUE之使用 AXIOS 进行GET 和 POST 进行传参"></a>四、VUE之使用 AXIOS 进行GET 和 POST 进行传参</h2><p>1.axios的定义<br>基于Promise的HTTP客户端，用于浏览器和node.js。<br>2.axios的特征<br>1.做的XMLHttpRequest从浏览器<br>2.让HTTP从node.js的请求<br>3.支持Promise API<br>4.拦截请求和响应<br>5.转换请求和响应数据<br>6.取消请求<br>7.自动转换JSON数据<br>8.客户端支持防范XSRF<br>3.axios的安装<br>三种方式，均可进行</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$  npm install axios   // 使用npm</span><br><span class="line">$  bower install axios   // 使用bower</span><br></pre></td></tr></table></figure>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>   // 通过cdn直接调用

<p>4.axios的使用<br>添加引用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import axios from &#x27;axios&#x27;;</span><br></pre></td></tr></table></figure>

<p>5.aixos之 get传参方式模板<br>此次get传参中的url需要进行字符串拼接</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">var id = 001;</span><br><span class="line">var url =  &#x27;http://192.168.**.***:8080/Card&#x27;;</span><br><span class="line">url += 	`?cardId=$&#123;id&#125;`;   // 拼接字符串</span><br><span class="line">axios.get(url).then(function(response) &#123;</span><br><span class="line">  if (response.data == false) &#123;</span><br><span class="line">  	this.$Message.success(&quot;注册成功&quot;);</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">  	this.$Message.info(&quot;注册失败&quot;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>6.aixos之 post传参方式实例</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">var url =  &#x27;&#x27;http://192.168.**.***:8080/Card&#x27;; </span><br><span class="line">axios.post(&#x27;url&#x27;, &#123;</span><br><span class="line">  数据库字段1: &#x27;value&#x27;,</span><br><span class="line">  数据库字段2: &#x27;value&#x27;</span><br><span class="line">&#125;</span><br><span class="line">)</span><br><span class="line">.then(function (response) &#123;</span><br><span class="line"> //具体操作</span><br><span class="line">  console.log(response);</span><br><span class="line">&#125;)</span><br><span class="line">.catch(function (error) &#123;</span><br><span class="line">  console.log(error);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2021/07/18/get&post%E4%BC%A0%E5%8F%82%E6%96%B9%E5%BC%8F/" data-id="ckr8lt4rt000520qw0lbfgtul" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-flex布局" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2021/07/18/flex%E5%B8%83%E5%B1%80/" class="article-date">
  <time datetime="2021-07-18T02:48:04.198Z" itemprop="datePublished">2021-07-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="flex-弹性布局"><a href="#flex-弹性布局" class="headerlink" title="flex 弹性布局"></a>flex 弹性布局</h1><p>一维的布局模型。一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。</p>
<p>二维布局 CSS Grid Layout，可以同时处理行和列上的布局。</p>
<h2 id="flexbox-两根轴线"><a href="#flexbox-两根轴线" class="headerlink" title="flexbox 两根轴线"></a>flexbox 两根轴线</h2><h3 id="主轴"><a href="#主轴" class="headerlink" title="主轴"></a>主轴</h3><p>主轴由 <code>flex-direction</code> 定义，可以取4个值：</p>
<ul>
<li><code>row</code></li>
<li><code>row-reverse</code></li>
<li><code>column</code></li>
<li><code>column-reverse</code></li>
</ul>
<p> <code>row</code> 或者 <code>row-reverse</code>，主轴将沿着 <strong>inline</strong> 方向延伸。</p>
<p><img src="https://mdn.mozillademos.org/files/15614/Basics1.png" alt="If flex-direction is set to row the main axis runs along the row in the inline direction."></p>
<p>选择 <code>column</code> 或者 <code>column-reverse</code> 时，主轴会沿着上下方向延伸 — 也就是 <strong>block 排列的方向。</strong></p>
<p><img src="https://mdn.mozillademos.org/files/15615/Basics2.png" alt="If flex-direction is set to column the main axis runs in the block direction."></p>
<h3 id="交叉轴"><a href="#交叉轴" class="headerlink" title="交叉轴"></a>交叉轴</h3><p>交叉轴垂直于主轴，所以如果你的<code>flex-direction</code> (主轴) 设成了 <code>row</code> 或者 <code>row-reverse</code> 的话，交叉轴的方向就是沿着列向下的。</p>
<p><img src="https://mdn.mozillademos.org/files/15616/Basics3.png" alt="If flex-direction is set to row then the cross axis runs in the block direction."></p>
<p>如果主轴方向设成了 <code>column</code> 或者 <code>column-reverse</code>，交叉轴就是水平方向。</p>
<p><img src="https://mdn.mozillademos.org/files/15617/Basics4.png" alt="If flex-direction is set to column then the cross axis runs in the inline direction."></p>
<h2 id="起始线和终止线"><a href="#起始线和终止线" class="headerlink" title="起始线和终止线"></a>起始线和终止线</h2><p>如果 <code>flex-direction</code> 是 <code>row</code> ，并且我是在书写英文，那么主轴的起始线是左边，终止线是右边。</p>
<p><img src="https://mdn.mozillademos.org/files/15618/Basics5.png" alt="Working in English the start edge is on the left."></p>
<p>如果我在书写阿拉伯文，那么主轴的起始线是右边，终止线是左边。</p>
<p><img src="https://mdn.mozillademos.org/files/15619/Basics6.png" alt="The start edge in a RTL language is on the right."></p>
<p>在这两种情况下，交叉轴的起始线是flex容器的顶部，终止线是底部，因为两种语言都是水平书写模式。</p>
<h2 id="Flex-容器"><a href="#Flex-容器" class="headerlink" title="Flex 容器"></a>Flex 容器</h2><p>把一个容器的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display"><code>display</code></a> 属性值改为 <code>flex</code> 或者 <code>inline-flex</code>。容器中的直系子元素就会变为 <strong>flex 元素</strong>。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：</p>
<ul>
<li>元素排列为一行 (<code>flex-direction</code> 属性的初始值是 <code>row</code>)。</li>
<li>元素从主轴的起始线开始。</li>
<li>元素不会在主维度方向拉伸，但是可以缩小。</li>
<li>元素被拉伸来填充交叉轴大小。</li>
<li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> 属性为 <code>auto</code>。</li>
<li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性为 <code>nowrap</code>。</li>
</ul>
<p>这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。<strong>如果有太多元素超出容器，它们会溢出而不会换行。</strong>如果一些元素比其他元素高，那么元素会<strong>沿交叉轴被拉伸来填满它的大小</strong>。</p>
<h3 id="更改flex方向-flex-direction"><a href="#更改flex方向-flex-direction" class="headerlink" title="更改flex方向 flex-direction"></a>更改flex方向 flex-direction</h3><p>在 flex 容器中添加 <code>flex-direction</code>属性可以让我们更改 flex 元素的排列方向。设置 <code>flex-direction: row-reverse</code> 可以让元素沿着行的方向显示，但是起始线和终止线位置会交换。</p>
<p>把 flex 容器的属性 <code>flex-direction</code> 改为 <code>column</code> ，主轴和交叉轴交换，元素沿着列的方向排列显示。改为 <code>column-reverse</code> ，起始线和终止线交换。</p>
<h2 id="用flex-wrap实现多行Flex容器"><a href="#用flex-wrap实现多行Flex容器" class="headerlink" title="用flex-wrap实现多行Flex容器"></a>用flex-wrap实现多行Flex容器</h2><p>虽然<code>flexbox</code>是一维模型，但可以使我们的<code>flex</code>项目应用到多行中。 在这样做的时候，您应该把每一行看作一个新的<code>flex</code>容器。 任何空间分布都将在该行上发生，而不影响该空间分布的其他行。</p>
<p>为了实现多行效果，请为属性<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a>添加一个属性值<code>wrap</code>。 现在，如果您的项目太大而无法全部显示在一行中，则会换行显示。 下面的实时例子包含已给出宽度的项目，对于<code>flex</code>容器，项目的子元素总宽度大于容器最大宽度。 由于<code>flex-wrap</code>的值设置为<code>wrap</code>，所以项目的子元素换行显示。若将其设置为<code>nowrap</code>，这也是初始值，它们将会缩小以适应容器，因为它们使用的是允许缩小的初始<code>Flexbox</code>值。 如果项目的子元素无法缩小，使用<code>nowrap</code>会导致溢出，或者缩小程度还不够小。</p>
<h2 id="简写属性-flex-flow"><a href="#简写属性-flex-flow" class="headerlink" title="简写属性 flex-flow"></a>简写属性 flex-flow</h2><p>你可以将两个属性 <code>flex-direction</code> 和 <code>flex-wrap</code> 组合为简写属性 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-flow"><code>flex-flow</code></a>。第一个指定的值为 <code>flex-direction</code> ，第二个指定的值为 <code>flex-wrap</code>.</p>
<p>在下面的例子中，尝试将第一个值修改为 <code>flex-direction</code> 的允许取值之一，即 <code>row</code>, <code>row-reverse</code>, <code>column</code> 或 <code>column-reverse</code>, 并尝试将第二个指定值修改为 <code>wrap</code> 或 <code>nowrap</code>。</p>
<h2 id="flex-元素上的属性"><a href="#flex-元素上的属性" class="headerlink" title="flex 元素上的属性"></a>flex 元素上的属性</h2><p>为了更好地控制 flex 元素，有三个属性可以作用于它们：</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow"><code>flex-grow</code></a></li>
<li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a></li>
<li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis"><code>flex-basis</code></a></li>
</ul>
<p>在这里，我们只会大概介绍一下它们的用法，更详细的细节请参阅其它的文章。</p>
<p>在考虑这几个属性的作用之前，需要先了解一下 <strong>可用空间</strong> available space 这个概念。这几个 flex 属性的作用其实就是改变了 flex 容器中的可用空间的行为。同时，可用空间对于 flex 元素的对齐行为也是很重要的。</p>
<p>假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的可用空间。在默认情况下， flexbox 的行为会把这 200px 的空间留在最后一个元素的后面。</p>
<p><img src="https://mdn.mozillademos.org/files/15620/Basics7.png" alt="This flex container has available space after laying out the items."></p>
<p>如果期望这些元素能自动地扩展去填充满剩下的空间，那么我们需要去控制可用空间在这几个元素间如何分配，这就是元素上的那些 <code>flex</code> 属性要做的事。 </p>
<h3 id="Flex-元素属性：flex-basis"><a href="#Flex-元素属性：flex-basis" class="headerlink" title="Flex 元素属性：flex-basis"></a>Flex 元素属性：<code>flex-basis</code></h3><p> <code>flex-basis</code> 定义了该元素的<strong>空间大小（</strong>the size of that item in terms of the space<strong>）</strong>，flex容器里除了元素所占的空间以外的富余空间就是<strong>可用空间</strong> available space。 该属性的默认值是 <code>auto</code> 。此时，浏览器会检测这个元素是否具有确定的尺寸。 在上面的例子中, 所有元素都设定了宽度（width）为100px，所以 <code>flex-basis</code> 的值为100px。</p>
<p>如果没有给元素设定尺寸，<code>flex-basis</code> 的值采用元素内容的尺寸。这就解释了：我们给只要给Flex元素的父元素声明 <code>display: flex</code> ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。</p>
<h3 id="Flex-元素属性：flex-grow"><a href="#Flex-元素属性：flex-grow" class="headerlink" title="Flex 元素属性：flex-grow"></a>Flex 元素属性：<code>flex-grow</code></h3><p><code>flex-grow</code> 若被赋值为一个正整数， flex 元素会以 <code>flex-basis</code> 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。</p>
<p>如果我们给上例中的所有元素设定 <code>flex-grow</code> 值为1， 容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。</p>
<p>flex-grow 属性可以按比例分配空间。如果第一个元素 <code>flex-grow</code> 值为2， 其他元素值为1，则第一个元素将占有2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有1/4（各50px）。</p>
<h3 id="Flex-元素属性：-flex-shrink"><a href="#Flex-元素属性：-flex-shrink" class="headerlink" title="Flex 元素属性： flex-shrink"></a>Flex 元素属性： <code>flex-shrink</code></h3><p><code>flex-grow</code>属性是处理flex元素在主轴上增加空间的问题，相反<code>flex-shrink</code>属性是处理flex元素收缩的问题。如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素<code>flex-shrink</code>属性设置为正整数来缩小它所占空间到<code>flex-basis</code>以下。与<code>flex-grow属性一</code>样，可以赋予不同的值来控制flex元素收缩的程度 —— 给<code>flex-shrink</code>属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。</p>
<p>在计算flex元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上flex-shrink属性可能会和flex-grow属性表现的不一致。因此，我们可以在文章《<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">控制Flex子元素在主轴上的比例</a>》中更详细地看一下这个算法的原理。</p>
<p>在给 <code>flex-grow</code> 和 <code>flex-shrink</code> 赋值是要注意比例。如果我们给所有flex元素的flex属性赋值为 <code>1 1 200px</code> ，并且希望其中一个元素可以增加到2倍，我们可以给该元素的flex属性赋值为<code>2 1 200px</code>。然而，你也可以选择赋值为flex: <code>10 1 200px</code> 和 flex: <code>20 1 200px</code> 。</p>
<h3 id="Flex属性的简写"><a href="#Flex属性的简写" class="headerlink" title="Flex属性的简写"></a>Flex属性的简写</h3><p>你可能很少看到 <code>flex-grow</code>，<code>flex-shrink</code>，和 <code>flex-basis</code> 属性单独使用，而是混合着写在 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex"><code>flex</code></a> 简写形式中。 <code>Flex</code> 简写形式允许你把三个数值按这个顺序书写 — <code>flex-grow</code>，<code>flex-shrink</code>，<code>flex-basis</code>。</p>
<p>你可以在下面的实例中尝试把flex简写形式中的数值更改为不同数值，但要记得第一个数值是 <code>flex-grow</code>。赋值为正数的话是让元素增加所占空间。第二个数值是<code>flex-shrink</code> — 正数可以让它缩小所占空间，但是只有在flex元素总和超出主轴才会生效。最后一个数值是 <code>flex-basis</code>；flex元素是在这个基准值的基础上缩放的。</p>
<p>大多数情况下可以用预定义的简写形式。 在这个教程中你可能经常会看到这种写法，许多情况下你都可以这么使用。下面是几种预定义的值：</p>
<ul>
<li><code>flex: initial</code></li>
<li><code>flex: auto</code></li>
<li><code>flex: none</code></li>
<li><code>flex: &lt;positive-number&gt;</code></li>
</ul>
<p><code>flex: initial</code> 是把flex元素重置为Flexbox的初始值，它相当于 <code>flex: 0 1 auto</code>。在这里 <code>flex-grow</code> 的值为0，所以flex元素不会超过它们 <code>flex-basis</code> 的尺寸。<code>flex-shrink</code> 的值为1, 所以可以缩小flex元素来防止它们溢出。<code>flex-basis</code> 的值为 <code>auto</code>. Flex元素尺寸可以是在主维度上设置的，也可以是根据内容自动得到的。</p>
<p><code>flex: auto</code> 等同于 <code>flex: 1 1 auto</code>；和上面的 <code>flex:initial</code> 基本相同，但是这种情况下，flex元素在需要的时候既可以拉伸也可以收缩。</p>
<p><code>flex: none</code> 可以把flex元素设置为不可伸缩。它和设置为 <code>flex: 0 0 auto</code> 是一样的。元素既不能拉伸或者收缩，但是元素会按具有 <code>flex-basis: auto</code> 属性的flexbox进行布局。</p>
<p>你在教程中常看到的 <code>flex: 1</code> 或者 <code>flex: 2</code> 等等。它相当于<code>flex: 1 1 0</code>。元素可以在<code>flex-basis</code>为0的基础上伸缩。</p>
<p>尝试在下面的实例中应用这些简写值。</p>
<h2 id="元素间的对齐和空间分配"><a href="#元素间的对齐和空间分配" class="headerlink" title="元素间的对齐和空间分配"></a>元素间的对齐和空间分配</h2><p>Flexbox的一个关键特性是能够设置flex元素沿主轴方向和交叉轴方向的对齐方式，以及它们之间的空间分配。</p>
<h3 id="align-items"><a href="#align-items" class="headerlink" title="align-items"></a><code>align-items</code></h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items"><code>align-items</code></a> 属性可以使元素在交叉轴方向对齐。</p>
<p>这个属性的初始值为<code>stretch</code>，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。</p>
<p>你也可以设置<code>align-items</code>的值为<code>flex-start</code>，使flex元素按flex容器的顶部对齐, <code>flex-end</code> 使它们按flex容器的下部对齐, 或者<code>center</code>使它们居中对齐. 在实例中尝试——我给出了flex容器的高度，以便你可以看到元素在容器中移动。看看如果更改 align-items的值为下列值会发生什么：</p>
<ul>
<li><code>stretch</code></li>
<li><code>flex-start</code></li>
<li><code>flex-end</code></li>
<li><code>center</code></li>
</ul>
<h3 id="justify-content"><a href="#justify-content" class="headerlink" title="justify-content"></a><code>justify-content</code></h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content"><code>justify-content</code></a>属性用来使元素在主轴方向上对齐，主轴方向是通过 <code>flex-direction</code> 设置的方向。初始值是<code>flex-start</code>，元素从容器的起始线排列。但是你也可以把值设置为<code>flex-end</code>，从终止线开始排列，或者<code>center</code>，在中间排列.</p>
<p>你也可以把值设置为<code>space-between</code>，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用<code>space-around</code>，使每个元素的左右空间相等。</p>
<p>在实例中尝试下列<code>justify-content</code>属性的值：</p>
<ul>
<li><code>stretch</code></li>
<li><code>flex-start</code></li>
<li><code>flex-end</code></li>
<li><code>center</code></li>
<li><code>space-around</code></li>
<li><code>space-between</code></li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2021/07/18/flex%E5%B8%83%E5%B1%80/" data-id="ckr8lt4rv000720qw8u8126yp" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-ES6新特性" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2021/07/18/ES6%E6%96%B0%E7%89%B9%E6%80%A7/" class="article-date">
  <time datetime="2021-07-18T02:48:04.194Z" itemprop="datePublished">2021-07-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <ol>
<li>let const var </li>
<li>箭头函数</li>
<li>数据结构set map</li>
<li>模板字符串</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2021/07/18/ES6%E6%96%B0%E7%89%B9%E6%80%A7/" data-id="ckr8lt4rn000120qw4t116tpm" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-Error" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2021/07/18/Error/" class="article-date">
  <time datetime="2021-07-18T02:48:04.191Z" itemprop="datePublished">2021-07-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <ol>
<li><p>错误提示代码：expected “indent”, got “outdent”</p>
<p>原因：在写stylus代码时，空格和tab的混用</p>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2021/07/18/Error/" data-id="ckr8lt4rr000320qw67b054t1" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-@include" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2021/07/18/@include/" class="article-date">
  <time datetime="2021-07-18T02:48:04.187Z" itemprop="datePublished">2021-07-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="include"><a href="#include" class="headerlink" title="@include"></a>@include</h3><p>导入mixin定义的“类”样式</p>
<h3 id="mixin"><a href="#mixin" class="headerlink" title="@mixin"></a>@mixin</h3><p>用于定义可重复使用的样式，避免了使用无语意的 class</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2021/07/18/@include/" data-id="ckr8lt4ra000020qw7qshgmtq" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2021/07/18/hello-world/" class="article-date">
  <time datetime="2021-07-18T02:16:51.069Z" itemprop="datePublished">2021-07-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2021/07/18/hello-world/">Hello World</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>Welcome to <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a target="_blank" rel="noopener" href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a target="_blank" rel="noopener" href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">&quot;My New Post&quot;</span></span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2021/07/18/hello-world/" data-id="ckr8kjtvi00002cqw6p8qhcna" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/page/3/">&amp;laquo; Prev</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="page-number current">4</span>
  </nav>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">July 2021</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/07/18/%E6%99%BA%E8%83%BD%E5%8C%96%E8%B7%A8%E7%AB%AF/">(no title)</a>
          </li>
        
          <li>
            <a href="/2021/07/18/%E5%9F%9F%E8%A7%A3%E6%9E%90/">(no title)</a>
          </li>
        
          <li>
            <a href="/2021/07/18/%E6%97%A0%E9%99%90%E7%BA%A7%E7%9B%AE%E5%BD%95%E6%A0%91/">(no title)</a>
          </li>
        
          <li>
            <a href="/2021/07/18/%E6%96%87%E5%AD%97%E5%B1%85%E4%B8%AD/">(no title)</a>
          </li>
        
          <li>
            <a href="/2021/07/18/%E5%BE%AE%E6%A0%BC%E5%BC%8F/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2021 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>